import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select,message } from 'antd';
import { PaginationProps } from "antd/lib/pagination";
const Styles = require("../../styles/index.less");
import * as api from '../../api/api';
import moment from 'moment';

export interface IUserCashsProps extends IFormProps {
    user: any
}
class UserCashs extends React.PureComponent<IUserCashsProps, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        this.getUserCashs();
    }

    search = () => {
        this.getUserCashs({ pageIndex: 1 });
    }

    getUserCashs = (payload?) => {
        payload = Object.assign({}, this.props.user.allUserCashSearchs, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: "user/getAllUserCashes",
            payload
        });
    }

    verifyUserCash = (record, isPass) => {
        this.props.form['isPass'] = isPass;
        this.props.form['id'] = record.id;
        let form = this.props.form;
        this.props.dispatch({
            type: "user/verifyUserCashes",
            payload: {
                form,
                callback: (result) => {
                    message.info(result);
                    this.search();
                }
            }
        });
    }

    onVerifyStatusChange = (verifyStatus) => {
        let pageIndex = 1;
        let payload = Object.assign({}, { verifyStatus, pageIndex });
        this.getUserCashs(payload);
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const {
            allUserCashes: { totalCount, items },
            allUserCashSearchs: { pageIndex, pageSize, verifyStatus, keywords },
        } = this.props.user;
        const pageChange = (pageIndex, pageSize) => {
            let payload = Object.assign({},
                this.props.user.userSearchs,
                { pageIndex, pageSize });
            this.getUserCashs(payload);
        }
        const pagination: PaginationProps | boolean = {
            total: totalCount,
            defaultCurrent: 1,
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 条`,
            showQuickJumper: true,
            pageSizeOptions: ["10", "20", "30", "50"],
            onShowSizeChange: pageChange,
            onChange: pageChange
        };


        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                            <Form.Item>
                                {getFieldDecorator("keywords", {
                                    initialValue: keywords
                                })(<Input
                                    style={{ width: 200 }}
                                    size={size}
                                    placeholder="输入用户名/昵称/手机号"
                                />)}
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                            <Form.Item label="审核状态">
                                {getFieldDecorator('verifyStatus', {
                                    initialValue: verifyStatus
                                })(<Select style={{ width: 120 }} onChange={this.onVerifyStatusChange}>
                                    <Select.Option value=''>全部</Select.Option>
                                    <Select.Option value={0}>待审核</Select.Option>
                                    <Select.Option value={1}>已通过</Select.Option>
                                    <Select.Option value={-1}>已驳回</Select.Option>
                                </Select>)}
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>提现申请列表 (共 {totalCount} 条)</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination={pagination}
                                rowKey={(record: api.SingleUserMallUsersVOUserCashVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return (pageIndex - 1) * pageSize + index + 1
                                }} />
                                {/* <Table.Column title="姓名" key="name" dataIndex="name" /> */}
                                <Table.Column title="银行卡持有人姓名" key="cardName" dataIndex="cardName" />
                                <Table.Column title="电话" key="phoneNumber" dataIndex="phoneNumber" />
                                <Table.Column title="银行卡号" key="cardNumber" dataIndex="cardNumber" />
                                <Table.Column title="银行名称" key="bankName" dataIndex="bankName" />
                                <Table.Column title="提现金额" key="amount" dataIndex="amount" />
                                <Table.Column title="申请时间" key="creationTime" render={(text, record: api.SingleUserMallUsersVOUserCashVO, index) => {
                                    return moment(record.creationTime).format(dateTimeFormat)
                                }} />
                                <Table.Column title="到账状态" key="statusView" render={(text, record:api.SingleUserMallUsersVOUserCashVO, index)=>
                                {
                                    return record.status == "0" ? "无" : record.statusView
                                }} />
                                <Table.Column title="审核状态" key="verifyStatusView" dataIndex="verifyStatusView" />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallUsersVOUserCashVO, index) => {
                                    return (
                                        <div>
                                            {record.verifyStatus == "0" ? (
                                                <a className={Styles.M_RIGHT} onClick={() => this.verifyUserCash(record, true)}>
                                                    同意
                                                </a>) : undefined}
                                                {record.verifyStatus == "0" ? (
                                                <a className={Styles.M_RIGHT} onClick={() => this.verifyUserCash(record, false)}>
                                                    驳回
                                                </a>) : undefined}
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
            </Row>)
    }
}

export default connect(({ user, loading: { models: { user: loading } } }) => ({ user, loading }))(Form.create()(UserCashs));
